<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="1"></el-col>
        <el-col :span="2">
          <el-button type="success"  @click="handleAdd" >新建产品</el-button>
        </el-col>
        <el-col :span="2">
          <el-select v-model="pageDate.param.parent" clearable placeholder="请选择项目集" >
          <el-option
            v-for="item in pageDate.setOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="2">
          <el-button type="primary"  @click="ProductListSearch" >查询</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-tabs v-model="pageDate.param.status"  type="border-card" @tab-change="handleTabs" tabPosition="left">
        <el-tab-pane label="全部" name="" />
        <el-tab-pane label="正常" name="normal"/>
        <el-tab-pane label="结束" name="closed"/>

  <el-table :data="pageDate.tableData" style="width: 100%">

    <el-table-column label="产品名称" prop="name" />
    <el-table-column label="负责人" prop="po" width="140" align="center"  >
      <template #default="scope">
        <el-link @click="handleUser(scope.row.po)">
          <el-icon class="el-icon--right"><User /></el-icon>{{scope.row.po}}
        </el-link>
      </template >
    </el-table-column>
    <el-table-column label="状态" prop="status" >
      <template #default="scope">
        <el-tag
          :type="scope.row.status === 'normal' ? 'success' :'warning'"
          disable-transitions
        >{{ scope.row.status  === 'normal' ? '正常' : '结束'}}</el-tag>
      </template>
    </el-table-column>

    <el-table-column label="创建时间" prop="createdDate" >
      <template #default="scope">
        {{dateFtt("yyyy-MM-dd hh:mm:ss",scope.row.createdDate) }}
      </template>
    </el-table-column>

    <el-table-column align="right">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >修改</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >删除</el-button
        >
      </template>
    </el-table-column>

  </el-table>

      </el-tabs>
    </el-main>
    <el-footer height="80px" >
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[5, 10, 50]"
        :small="small"
        :background="background"
        layout="total,sizes, prev, pager, next"
        :total="pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-footer>

  </el-container>

  <ProductInfoDialog   :infoDialogData="formData.form"    v-model:infoDialog=recordDialogVisible  @renovate="ProductListSearch"> </ProductInfoDialog>

  <UserInfoDialog  :account="accountName"  v-model:userDialog="userDialogVisible"  />
</template>

<script setup>

  import {dateFtt} from '@/utils/dateTime.js';
  import { computed, ref,onMounted ,reactive } from 'vue'
  import UserInfoDialog from 'views/user/comp/UserInfoDialog.vue';
  import ProductInfoDialog from 'views/project/comp/ProductInfoDialog.vue';
  import {User } from '@element-plus/icons-vue'
  import { ProductList ,ProductDelete,ProductGetById ,ProjectSetSelect} from '@/api/project'
  import { ElMessageBox,ElMessage } from 'element-plus';


  // const search = ref('');

  const pageTotal=ref(0);

  const pageSize = ref(5);

  const currentPage = ref(1);

  const pageDate=reactive({
    tableData : [],
    setOptions:[],
    param:{
      status:'',
      parent:''

    }
  });


  const handleCurrentChange = (current) => {
    currentPage.value=current;
    ProductListSearch();
  }
  const handleSizeChange = (size) => {
    pageSize.value=size;
    ProductListSearch();
  }

  const ProductListSearch= ()=>{

    let form={
      currentPage:currentPage.value,
      pageSize:pageSize.value,
      status:pageDate.param.status,
      parent:pageDate.param.parent
    }

    ProductList(form).then(res=>{
      pageTotal.value=res.totalResult;
      pageDate.tableData = res.data.records;

    })
  }

  const handleTabs =()=>{
    ProductListSearch();
  }

  const handleDelete = (index, row) => {
    ElMessageBox.confirm('确定要删除这条数据?')
      .then(() => {
        let param={
          id:row.id
        }
        ProductDelete(param).then(res =>{
          if(res.code==200) {
            ElMessage.success("数据删除成功!");
            ProductListSearch();
          }else{
            ElMessage.error(res.message);
          }
        })
      })
      .catch(() => {
      })
  }


  const handleEdit = (index,row) => {
    let param = {};
    param.id = row.id;
    ProductGetById(param).then(res => {
      formData.form = res.data;
      formData.form.feedbackArr=  formData.form.feedback.split(',');
      recordDialogVisible.value = true;
    })
  }

  //新建项目集
  const handleAdd = () => {
    formData.form = {
      model:'scrum',
      // parent:0
    };
    recordDialogVisible.value = true;
  }

  /**
   * ----------------------------------------------
   * 新增修改产品信息弹框
   * */
  const recordDialogVisible=ref(false);
  const formData = reactive({
    form:{}
  })



  /**
   * ----------------------------------------------
   * 用户查询
   * */
  const userDialogVisible=ref(false);
  const accountName=ref("");
  const handleUser=(account)=>{
    accountName.value=account;
    userDialogVisible.value=true;
  }
  onMounted(()=>{
    ProductListSearch();
    ProjectSetSelect().then(res=>{
      if(res.code==200){
        pageDate.setOptions=res.data;
      }
    })

  })

</script>
